function fetchInfoItems(){
	var html = ''
	$.ajax(
		{
		  type:"get",
		  url:"http://127.0.0.1:8080/turn",
		  success:function(result){
	      for(let item of result){
			let ite
		 	ite = Object.values(item)[0];
		 	html += "<li><p>"+Object.keys(item)[0]+"-温度"+
		 	ite['temp1']+"-湿度"+
		 	ite['humidity1']+"-光照"+
		 	ite['beam']+"-二氧化碳"+
		 	ite['CO2']+"</p></li>";
		 }
		 $(".wrap ul").html(html)
		 var ls=$(".wrap li").length/2+1
		 i=0
		  setInterval(function(){
		    i++
		    if(i==ls){
		      i=1
		      $(".wrap ul").css({marginTop:0})
		      $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
		    }
		      $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
		  },2400);

		  }
		}
	)
	// $.post('http://127.0.0.1:8080/turn',{index:"0", num:"10"}, function(result){
	// 	 for(let item of result){
	// 	 	item = Object.values(item)[0];
	// 	 	html += "<li><p>"+item['index']+"-温度"+
	// 	 	item['temp1']+"-湿度"+
	// 	 	item['humidity1']+"-光照"+
	// 	 	item['CO2']+"-二氧化碳"+
	// 	 	item['beam']+"</p></li>";
	// 	 }
	// 	 $(".wrap ul").html(html)
	// 	 var ls=$(".wrap li").length/2+1
	// 	  i=0
	// 	  setInterval(function(){
	// 	    i++
	// 	    if(i==ls){
	// 	      i=1
	// 	      $(".wrap ul").css({marginTop:0})
	// 	      $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
	// 	    }
	// 	      $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
	// 	  },1000);
	// })
}

function fetchbeamitems(){          
	$.ajax(
	  {
		type:"get",
		url:"http://127.0.0.1:8080/turn/beam",
		success:function(result){
		  
		  let timer = [];
		  let temp =[];
		  for(let item of Object.keys(result)){
			timer.push(item);
			temp.push(result[item])
			
		  }
			// console.log(timer)
			// console.log(temp)
		  var yearData = [
			{
			  year: "2020", // 年份
			  data: [temp]
			}
		  ];
		  // 1. 实例化对象
		  var myChart = echarts.init(document.querySelector(".bar .chart"));
		  // 2.指定配置
		  var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35","#ede640"],
			tooltip: {
			  trigger: "axis"
			},
			legend: {
			  // 如果series对象有name 值，则legend可以不用写data
			  // 修改图例组件 文字颜色
			  textStyle: {
				color: "#4c9bfd"
			  },
			  // 这个10% 必须加引号
			  right: "10%"
			},
			grid: {
			  //控制图表大小
			  top: "8%",
			  left: "3%",
			  right: "4%",
			  bottom: "3%",
			  show: true, // 显示边框
			  borderColor: "#012f4a", // 边框颜色
			  containLabel: true // 包含刻度文字在内
			},
			toolbox:{
			  feature:{
				saveAsImage:{}
			  }
			},
		  
			xAxis: {
			  type: "category",
			  boundaryGap: false,
			  data: timer,
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  }
			},
			yAxis: {
			  type: "value",
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  },
			  splitLine: {
				lineStyle: {
				  color: "#012f4a" // 分割线颜色
				}
			  },
			min: 0,
			max: 1,
			interval: 0.1,
			},
			series: [
			  {
				name: "光照",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: yearData[0].data[0]
			  },
			]
		  };
		  
		  // 3. 把配置给实例对象
		  myChart.setOption(option);
		  // 4. 让图表跟随屏幕自动的去适应
		  window.addEventListener("resize", function() {
			myChart.resize();
		  });

		}
	  }
	)
}

function fetchtempitems(){          
	$.ajax(
	  {
		type:"get",
		url:"http://127.0.0.1:8080/turn",
		success:function(result){
		  let timer = [];
		  let temp1 =[];
		  let temp2 = [];
		  let temp3 = [];
		  for(let item of result){
			timer.push(Object.keys(item)[0]);
			item = Object.values(item)[0];
			temp1.push(item['temp1']);
			temp2.push(item['temp2']);
			temp3.push(item['temp3']);
		  }
		  var yearData = [
			{
			  year: "2020", // 年份
			  data: [
				// 三个数组是因为有两条线
				temp1,temp2,temp3
			  ]
			},
		  ];
		  // 1. 实例化对象
		  var myChart = echarts.init(document.querySelector(".line .chart"));
		  // 2.指定配置
		  var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35","#ede640"],
			tooltip: {
			  trigger: "axis"
			},
			legend: {
			  // 如果series 对象有name 值，则 legend可以不用写data
			  // 修改图例组件 文字颜色
			  textStyle: {
				color: "#4c9bfd"
			  },
			  // 这个10% 必须加引号
			  right: "10%"
			},
			grid: {
			  //控制图表大小
			  top: "8%",
			  left: "3%",
			  right: "4%",
			  bottom: "3%",
			  show: true, // 显示边框
			  borderColor: "#012f4a", // 边框颜色
			  containLabel: true // 包含刻度文字在内
			},
			toolbox:{
			  feature:{
				saveAsImage:{}
			  }
			},
		  
			xAxis: {
			  type: "category",
			  boundaryGap: false,
			  data: timer,
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  }
			},
			yAxis: {
			  type: "value",
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  },
			  splitLine: {
				lineStyle: {
				  color: "#012f4a" // 分割线颜色
				}
			  },
			  min: 15,
			max: 23,
			interval: 0.5,
			},
			series: [
			  {
				name: "温度1",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: yearData[0].data[0]
			  },
			  {
				name: "温度2",
				type: "line",
				smooth: true,
				data: yearData[0].data[1]
			  },
			  {
				  name: "温度3",
				  type: "line",
				  smooth: true,
				  data: yearData[0].data[2]
				}
			]
		  };
		  
		  // 3. 把配置给实例对象
		  myChart.setOption(option);
		  // 4. 让图表跟随屏幕自动的去适应
		  window.addEventListener("resize", function() {
			myChart.resize();
		  });

		}
	  }

	)
}

function fetchcoitems(){          
	$.ajax(
	  {
		type:"get",
		url:"http://127.0.0.1:8080/turn/CO2",
		success:function(result){
		  
		  let timer = [];
		  let temp =[];
		  for(let item of Object.keys(result)){
			timer.push(item);
			temp.push(result[item])
			
		  }
			console.log(timer)
			console.log(temp)
		  var yearData = [
			{
			  year: "2020", // 年份
			  data: [temp]
			}
		  ];
		  // 1. 实例化对象
		  var myChart = echarts.init(document.querySelector(".line2 .chart"));
		  // 2.指定配置
		  var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35","#ede640"],
			tooltip: {
			  trigger: "axis"
			},
			legend: {
			  // 如果series对象有name 值，则legend可以不用写data
			  // 修改图例组件 文字颜色
			  textStyle: {
				color: "#4c9bfd"
			  },
			  // 这个10% 必须加引号
			  right: "10%"
			},
			grid: {
			  //控制图表大小
			  top: "8%",
			  left: "3%",
			  right: "4%",
			  bottom: "3%",
			  show: true, // 显示边框
			  borderColor: "#012f4a", // 边框颜色
			  containLabel: true // 包含刻度文字在内
			},
			toolbox:{
			  feature:{
				saveAsImage:{}
			  }
			},
		  
			xAxis: {
			  type: "category",
			  boundaryGap: false,
			  data: timer,
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  }
			},
			yAxis: {
			  type: "value",
			  axisTick: {
				show: false // 去除刻度线
			  },
			  axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
			  axisLine: {
				show: false // 去除轴线
			  },
			  splitLine: {
				lineStyle: {
				  color: "#012f4a" // 分割线颜色
				}
			  },
			min: 750,
			max: 4100,
			interval: 300,
			},
			series: [
			  {
				name: "CO2",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: yearData[0].data[0]
			  },
			]
		  };
		  
		  // 3. 把配置给实例对象
		  myChart.setOption(option);
		  // 4. 让图表跟随屏幕自动的去适应
		  window.addEventListener("resize", function() {
			myChart.resize();
			} 
		  );

		}
	  }
	)
  }

function fetchhumidityitems(){          
	$.ajax(
	  {
		type:"get",
		url:"http://127.0.0.1:8080/turn",
		success:function(result){
		  let timer = [];
		  let temp1 =[];
		  let temp2 = [];
		  let temp3 = [];
		  for(let item of result){
			timer.push(Object.keys(item)[0]);
			item = Object.values(item)[0];
			temp1.push(item['humidity1']);
			temp2.push(item['humidity2']);
			temp3.push(item['humidity3']);
		  }
		  var yearData = [
			{
			  year: "2020", // 年份
			  data: [
				// 三个数组是因为有两条线
				temp1,temp2,temp3
			  ]
			},
		  ];
			// 1. 实例化对象
			var myChart = echarts.init(document.querySelector(".pie .chart"));
			// 2.指定配置
			var option = {
			// 通过这个color修改两条线的颜色
			color: ["#00f2f1", "#ed3f35","#ede640"],
			tooltip: {
				trigger: "axis"
			},
			legend: {
				// 如果series对象有name 值，则legend可以不用写data
				// 修改图例组件 文字颜色
				textStyle: {
				color: "#4c9bfd"
				},
				// 这个10% 必须加引号
				right: "10%"
			},
			grid: {
				//控制图表大小
				top: "8%",
				left: "3%",
				right: "4%",
				bottom: "3%",
				show: true, // 显示边框
				borderColor: "#012f4a", // 边框颜色
				containLabel: true // 包含刻度文字在内
			},
			toolbox:{
				feature:{
				saveAsImage:{}
				}
			},
			
			xAxis: {
				type: "category",
				boundaryGap: false,
				data: timer,
				axisTick: {
				show: false // 去除刻度线
				},
				axisLabel: {
				color: "#4c9bfd" // 文本颜色
				},
				axisLine: {
				show: false // 去除轴线
				}
			},
			yAxis: {
				type: "value",
				axisTick: {
				show: false // 去除刻度线
				},
				axisLabel: {
				color: "#4c9bfd" // 文本颜色
				},
				axisLine: {
				show: false // 去除轴线
				},
				splitLine: {
				lineStyle: {
					color: "#012f4a" // 分割线颜色
				}
				},
				min: 50,
			max: 100,
			interval: 5,
			},
			series: [
				{
				name: "湿度1",
				type: "line",
				// true 可以让我们的折线显示带有弧度
				smooth: true,
				data: yearData[0].data[0]
				},
				{
				name: "湿度2",
				type: "line",
				smooth: true,
				data: yearData[0].data[1]
				},
				{
					name: "湿度3",
					type: "line",
					smooth: true,
					data: yearData[0].data[2]
				}
			]
			};
			
			// 3. 把配置给实例对象
			myChart.setOption(option);
			// 4. 让图表跟随屏幕自动的去适应
			window.addEventListener("resize", function() {
			myChart.resize();
			});
		}
	  }

	)
}




$(document).ready(
   function(){
 setInterval(fetchInfoItems,1000);

// 折线图-温度变化
(function() {
	fetchtempitems()
  setInterval(fetchtempitems,1000)

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();

//折线图-湿度变化
(function() {
 fetchhumidityitems()
 setInterval(fetchhumidityitems,1000)

  // 5.点击切换效果
  $(".line h2").on("click", "a", function() {
    // alert(1);
    // console.log($(this).index());
    // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
    // console.log(yearData[$(this).index()]);
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 需要重新渲染
    myChart.setOption(option);
  });
})();


//折线图-光照
(function() {
	fetchbeamitems()
	setInterval(fetchbeamitems,1000);

// 5.点击切换效果
$(".line h2").on("click", "a", function() {
  // alert(1);
  // console.log($(this).index());
  // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
  // console.log(yearData[$(this).index()]);
  var obj = yearData[$(this).index()];
  option.series[0].data = obj.data[0];
  option.series[1].data = obj.data[1];
  // 需要重新渲染
  myChart.setOption(option);
});
})();

//折线图-CO2
(function() {
fetchcoitems()
setInterval(fetchcoitems, 1000)
// 5.点击切换效果
$(".line h2").on("click", "a", function() {
  // alert(1);
  // console.log($(this).index());
  // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
  // console.log(yearData[$(this).index()]);
  var obj = yearData[$(this).index()];
  option.series[0].data = obj.data[0];
  option.series[1].data = obj.data[1];
  // 需要重新渲染
  myChart.setOption(option);
});
})();

//柱状图
(function() {
	var mychart=echarts.init(document.querySelector(".map .panel .chart"));
	var option = {
		grid: {
			//控制图表大小
			top: "8%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			show: true, // 显示边框
			borderColor: "#012f4a", // 边框颜色
			containLabel: true // 包含刻度文字在内
		  },
		xAxis: {
			axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },

		},
		yAxis: {
			axisLabel: {
				color: "#4c9bfd" // 文本颜色
			  },
		},
		series: [
		  {
			symbolSize: 13,
			data: [
			  [10.0, 8.04],
			  [8.07, 6.95],
			  [13.0, 7.58],
			  [9.05, 8.81],
			  [11.0, 8.33],
			  [14.0, 7.66],
			  [13.4, 6.81],
			  [10.0, 6.33],
			  [14.0, 8.96],
			  [12.5, 6.82],
			  [9.15, 7.2],
			  [11.5, 7.2],
			  [3.03, 4.23],
			  [12.2, 7.83],
			  [2.02, 4.47],
			  [1.05, 3.33],
			  [4.05, 4.96],
			  [6.03, 7.24],
			  [12.0, 6.26],
			  [12.0, 8.84],
			  [7.08, 5.82],
			  [5.02, 5.68],
			  [2.03, 3.23],
			  [2.43, 3.43],
			  [1.03, 2.13],
			  [1.33, 2.33],
			],
			type: 'scatter'
		  }
		]

		
	  };

	mychart.setOption(option);
})();

})


